<template>
	<yb-popup :options="optionsSync" :duration="optionsSync.duration" direction="bottom" :visible="visible" @hide="hide">
		<view class="yb-editor yb-flex" :style="{
			'background-color': optionsSync.bgColor,
			'border-top-left-radius': Util.pixelunit(optionsSync.radius),
			'border-top-right-radius': Util.pixelunit(optionsSync.radius)
		}">
			<view class="yb-flex yb-row yb-align-center yb-justify-between">
				<yb-tap :disabled="cancelSync.disabled" @click="editorCancel">
					<text :style="{
						'font-size': Util.pixelunit(cancelSync.size),
						color: cancelSync.color,
						opacity: cancelSync.disabled ? 0.5 : 1
					}">{{cancelSync.text}}</text>
				</yb-tap>
				<text :style="{
					'font-size': Util.pixelunit(titleSync.size),
					color: titleSync.color
				}">{{titleSync.text}}</text>
				<yb-tap :disabled="confirmSync.disabled" @tap="editorConfirm">
					<text :style="{
						'font-size': Util.pixelunit(confirmSync.size),
						color: confirmSync.color,
						opacity: confirmSync.disabled ? 0.5 : 1
					}">{{confirmSync.text}}</text>
				</yb-tap>
			</view>
			<textarea class="yb-editor-texarea" :style="{
				'background-color': optionsSync.textareaColor,
				'color': optionsSync.color,
				'font-size':  Util.pixelunit(optionsSync.size)
			}" v-model="value" :placeholder="placeholder" cols="30" rows="10"></textarea>
			<yb-safe-bottom></yb-safe-bottom>
		</view>
	</yb-popup>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		data () {
			return {
				title: '',
				visible: false,
				placeholder: '',
				options: {},
				value: '',
				confirm: '确认',
				cancel: '取消',
				success: null,
				fail: null
			}
		},
		computed: {
			Util () {
				return Util
			},
			titleSync () {
				return Object.assign({}, {
					text: '',
					color: '#666',
					size: '36rpx',
				}, Util.typeof(this.title) == 'Object' ? this.title : Util.typeof(this.title) == 'String' ? {text: this.title} : {})
			},
			confirmSync () {
				return Object.assign({}, {
					text: '确认',
					disabled: false,
					color: '#1989FA',
					size: '32rpx'
				}, Util.typeof(this.confirm) == 'Object' ? this.confirm : Util.typeof(this.confirm) == 'Boolean' ? {disabled: this.confirm} : Util.typeof(this.confirm) == 'String' ? {text: this.confirm} : {})
			},
			cancelSync () {
				return Object.assign({}, {
					text: '取消',
					disabled: false,
					color: '#333',
					size: '32rpx'
				}, Util.typeof(this.cancel) == 'Object' ? this.cancel : Util.typeof(this.cancel) == 'Boolean' ? {disabled: this.cancel} : Util.typeof(this.cancel) == 'String' ? {text: this.cancel} : {})
			},
			optionsSync () {
				return Object.assign({}, {
					popout: 'fade',
					duration: 300,
					bgColor: '#fff',
					textareaColor: '#eee',
					color: '#333',
					size: '28rpx',
					radius: '20rpx'
				}, this.options)
			}
		},
		methods: {
			show ({title, value, placeholder, confirm, cancel, success, fail, options}) {
				this.title = title || ''
				this.value = value || ''
				this.placeholder = placeholder || ''
				this.confirm = confirm || '确认'
				this.cancel = cancel || '取消'
				this.success = success || null
				this.fail = fail || null
				this.options = options || {}
				this.visible = true
			},
			hide () {
				this.visible = false
				this.fail ? this.fail() : null
			},
			editorConfirm () {
				this.success ? this.success({
					confirm: true,
					data: {
						value: this.value
					}
				}) : null
				this.visible = false
			},
			editorCancel () {
				this.success ? this.success({
					confirm: false
				}) : null
				this.visible = false
			},
		}
	}
</script>

<style>
	.yb-editor {
		padding: 30rpx;
	}
	.yb-editor-texarea {
		height: 800rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}
</style>